/*
 * @Description:
 * @Author: Cxy
 * @Date: 2024-02-21 21:28:56
 * @LastEditors: Cxy
 * @LastEditTime: 2024-02-29 23:11:40
 * @FilePath: \blogAdmin\play\src\components\XyTransition\src\index.tsx
 */

import { Transition } from 'vue'
import { configStore } from '@/stores/config'

export default defineComponent({
  name: 'XyTransition',
  props: {
    tranConfig: {
      type: Object as () => TranConfigInter
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  setup(props, { slots }) {
    const tranConfig = computed(() => props.tranConfig)
    return () =>
      h(
        Transition,
        props.isShow
          ? {
              name: tranConfig.value?.name || 'router-transition',
              enterFromClass: `router-transition-${tranConfig.value?.enterFromClass || configStore.config.enterFromClass}`,
              leaveToClass: `router-transition-${tranConfig.value?.leaveToClass || configStore.config.leaveToClass}`,
              appear: true,
              mode: 'out-in'
            }
          : { mode: 'out-in' },
        () => slots.default?.()
      )
  }
})
